<template>
  <div>
    <header-login />
    <div class="bgc-white">
      <div class="container-width">
        <logo-shop-bar :shop-info="true" :advantage="true" :shopInfoData="shopInfo" @search="search" />
      </div>
    </div>
    <div class="bgc-dark-blue">
      <div class="container-width">
        <div class="flex v-align-c pad-t-2 pad-b-2">
          <el-button
            class="shop-tabs-btn mar-r-20"
            :class="!shopTabs ? 'actived' : ''"
            @click="tabsEls(0)"
          >店铺首页</el-button>
          <el-button
            class="shop-tabs-btn"
            :class="shopTabs ? 'actived' : ''"
            @click="tabsEls(1)"
          >全部商品</el-button>
        </div>
      </div>
    </div>
    <shop-home :shopId="shopId" :pageId="pageId" v-show="!shopTabs" />
    <shop-all-goods v-show="shopTabs" :shopId="shopId" />
    <div class="bgc-white">
      <div class="container-width">
        <footer-links />
      </div>
      <div class="footer-line" />
      <div class="container-width">
        <footer-infos />
      </div>
    </div>
    <right-nav-sticky />
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import headerLogin from '@/components/headerLogin/index.vue'
import logoShopBar from '@/components/logoShopBar/index.vue'
import shopHome from '@/pages/shop/components/shopHome/index.vue'
import shopAllGoods from '@/pages/shop/components/shopAllGoods/index.vue'
import footerLinks from '@/components/footerLinks/index.vue'
import footerInfos from '@/components/footerInfos/index.vue'
import rightNavSticky from '@/components/rightNavSticky/index.vue'
import pic7 from '@/assets/images/uploads/pic-7.png'
import event from '@/model/event'
export default defineComponent({
  name: 'Index',
  components: {
    headerLogin,
    logoShopBar,
    shopHome,
    shopAllGoods,
    footerLinks,
    footerInfos,
    rightNavSticky
  },
  setup() {
    const router = useRouter()
    const pageId = router.currentRoute.value.query.pageId
    const shopId = router.currentRoute.value.query.shopId
    const shopTabs = ref(<number>0)
    const shopInfo = ref({})
    onMounted(() => {
      event.on('shopDetail_shopInfo', (data) => {
        shopInfo.value = data
      })
    })
    const tabsEls = (value:number) => {
      shopTabs.value = value
    }
    const search = () => {
      shopTabs.value = 1
    }

    return {
      shopTabs,
      tabsEls,
      pic7,
      shopInfo,
      search,
      pageId,
      shopId
    }
  }
})
</script>

<style lang="scss" scoped>
$darkBlue: #182245;

::v-deep(.shop-tabs-btn){
  border-radius: 0;
  border: none;
  background: $darkBlue;
  color: #fff;
  font-size: 16px;
  min-width: 108px;
  padding: 12px 0;
  &.actived{
    background: #fff;
    color: $darkBlue;
    font-size: 14px;
  }
}
.line-shop{
  height: 2px;
  background: $darkBlue;
}
.shop-h-pic{
  height: 108px;
  img{
    max-height: 108px;
  }
}
.space-category{
  width: 264px;
}
.slider-sign-notice{
  width: 232px;
}
.footer-line{
  height: 1px;
  background: #dbdbdb;
  margin: 0 3%;
}
</style>
